<template lang="pug">
.indexLayout
  left(
    :collapsed='collapsed',
    :topNavEnable='topNavEnable',
    :belongTopMenu='belongTopMenu',
    :defaultActive='defaultActive',
    :menuData='permissionMenuData'
  )

  .indexLayout-right(:class='{ "fiexd-header": headFixed }')
    right-top(
      :collapsed='collapsed',
      :topNavEnable='topNavEnable',
      :belongTopMenu='belongTopMenu',
      :toggleCollapsed='toggleCollapsed',
      :breadCrumbs='breadCrumbs',
      :menuData='rightNav'
    )
    .indexlayout-right-main
      router-view 
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { StateType as GlobalStateType } from '@/store/global'
import { CurrentUser as UserStateType } from '@/store/user'
import {
  RoutesDataItem,
  getRouteItem,
  getSelectLeftMenuPath,
  getRouteBelongTopMenu,
  BreadcrumbType,
  getRightMenuData,
  getLeftMenus,
} from '@/routes'
import Left from '@/components/layouts/indexLayout/left.vue'
import RightTop from '@/components/layouts/indexLayout/rightTop.vue' 

interface IndexLayoutSetupData {
  collapsed: boolean;
  toggleCollapsed: () => void;
  topNavEnable: boolean;
  belongTopMenu: string;
  headFixed: boolean;
  defaultActive: string;
  breadCrumbs: BreadcrumbType[];
  permissionMenuData: RoutesDataItem[];
  routeItem: RoutesDataItem;
  rightNav: RoutesDataItem[];
}

export default defineComponent({
  name: 'indexLayout',
  components: {
    Left,
    RightTop
  },
  setup(): IndexLayoutSetupData {
    const store = useStore<{
      global: GlobalStateType;
      user: UserStateType;
    }>()
    const route = useRoute()

    const currentUser = computed<UserStateType>(() => store.state.user)

    // const isLogin = computed<boolean>(() =>
    //   currentUser.value ? currentUser.value.id > 0 : false
    // )

    //获取所有菜单
    // const menuData: RoutesDataItem[] =  vueRoutes(IndexLayoutRoutes);
    const menuData: RoutesDataItem[] = currentUser.value.menus //vueRoutes((router.getRoutes()) as unknown as RoutesDataItem[]); //settings.menusList;
    //获取当前路由
    const currentRoute = computed<RoutesDataItem>(() =>
      getRouteItem(route.path, menuData)
    )

    // console.log(menuData)

    //  // 有权限的菜单
    // // const permissionMenuData = computed<RoutesDataItem[]>(()=> getPermissionMenuData(store.state.user.menus, menuData));
    // const permissionMenuData = menuData;

    // 当前路由的顶部菜单path
    const belongTopMenu = computed<string>(() =>
      getRouteBelongTopMenu(currentRoute.value)
    )

    const leftMenuData = computed<RoutesDataItem[]>(() =>
      getLeftMenus(belongTopMenu.value, menuData)
    )
    // // 当前路由的父路由path[]
    // const routeParentPaths = computed<string[]>(()=>formatRoutePathTheParents(currentRoute.value.path));

    // 收缩左侧
    const collapsed = computed<boolean>(() => store.state.global.collapsed)
    const toggleCollapsed = (): void => {
      store.commit('global/changeLayoutCollapsed', !collapsed.value)
    }

    // 右侧顶部导航是否开启
    const topNavEnable = computed<boolean>(
      () => store.state.global.topNavEnable
    )

    // 右侧顶部是否固定
    const headFixed = computed<boolean>(() => store.state.global.headFixed)

    const rightNav = computed<RoutesDataItem[]>(() =>
      getRightMenuData(menuData)
    )
    // 左侧选择的菜单
    const defaultActive = computed<string>(() =>
      getSelectLeftMenuPath(currentRoute.value)
    )

    // // 面包屑导航
    // const breadCrumbs = computed<BreadcrumbType[]>(() => getBreadcrumbRoutes(currentRoute.value,routeParentPaths.value, menuData));

    return {
      collapsed: (collapsed as unknown) as boolean,
      toggleCollapsed,
      topNavEnable: (topNavEnable as unknown) as boolean,
      belongTopMenu: (belongTopMenu as unknown) as string,
      headFixed: (headFixed as unknown) as boolean,
      defaultActive: (defaultActive as unknown) as string,
      breadCrumbs: [], // breadCrumbs as unknown as BreadcrumbType[],
      permissionMenuData: (leftMenuData as unknown) as RoutesDataItem[],
      routeItem: (currentRoute as unknown) as RoutesDataItem,
      rightNav: (rightNav as unknown) as RoutesDataItem[],
    }
  },
})
</script>

<style lang="scss">
@import '../assets/css/variables.scss';
.indexLayout {
  display: flex;
  height: 100vh;
  overflow: hidden;

  .indexLayout-right {
    position: relative;
    flex: 1;
    overflow: auto;
    background-color: $mainBgColor;
    &.fiexd-header {
      display: flex;
      flex-direction: column;
      .indexlayout-right-main {
        flex: 1;
        overflow: auto;
        margin: 10px;
      }
    }
  }

  .indexlayout-main-conent {
    margin: 24px;
    position: relative;
  }
}
</style>